<template>
  <el-dialog
      title="添加分组"
      :visible.sync="visible"
      :close-on-click-modal="false"
      @close="closeForm('')"
      width="840px"
      class="group_dialog"
      destroy-on-close
  >
    <el-form :model="form" :rules="rules" label-width="80px" class="groupForm" ref="drawerForm">
      <el-form-item label="分组名称：" prop="name">
        <el-input
            placeholder="请输入"
            v-model="form.name"
        ></el-input>
      </el-form-item>
      <div class="title">选择同组画像</div>
      <div class="label-list">
        <div :class="['label',{'label-active':isCheck(item.info.id)}]" @click="clickLabel(item,index)" v-for="(item,index) in imageInfoList" :key="index">{{item.info.dimension1FieldDesc}}</div>
      </div>
    </el-form>
    <div class="dialog-footer">
      <el-button @click="handleSubmit" :loading="btnLoading" size="small" class="btn plain-btn">确认</el-button>
      <el-button @click="closeForm('')" size="small" class="btn default-btn">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {sandbox} from '@/libs/util'
import drawer from '@/mixins/drawer.js'
export default {
  mixins: [drawer],
  props:{
    visible: {
      type: Boolean,
      default: false,
    },
    portraitId: {
      type: String,
      default: '',
    },
    portraitType: {
      type: String,
      default: ''
    },
    caseGroupData: {
      type: Object,
      default: () => {}
    },
    imageInfoList: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
      btnLoading:false,
      form: sandbox({
        name:'',
        portraitType:''
      }),
      infoIdList: [],
      rules: {
        name: [{required: true, message: '必填项', trigger: 'blur'}],
        pid: [{required: true, message: '必填项', trigger: 'trigger'}],
      },
      selectList:[]
    }
  },
  computed:{
    isCheck(){
      return (id) => this.infoIdList.includes(id)
    }
  },
  methods: {
    AddRow(){
      let form = {
        infoGroup:{
          name:this.form.name,
          portraitType:this.portraitType,
        },
        infoIdList:this.infoIdList
      }
      return this.$api.api_urcap_portraitInfo_addInfoGroup({
        body: form,
        config: {showMsg: true}
      })
    },
    UpdateRow(){
      let form = {
        infoGroup:{
          name:this.form.name,
          portraitType:this.portraitType,
        },
        infoIdList:this.infoIdList
      }
      return this.$api.api_urcap_portraitInfo_addInfoGroup({
        body: form,
        config: {showMsg: true}
      })
    },

    clickLabel(item){
      const findIndex = this.infoIdList.findIndex(e => e === item.info.id)
      if(findIndex === -1){
        this.infoIdList.push(item.info.id)
      } else{
        this.infoIdList.splice(findIndex,1)
      }
    },

  },
}
</script>

<style scoped lang="scss">
.title{
  font-size: 16px;
  color: #333333;
  line-height: 22px;
  margin-bottom: 10px;
}
.label-list{
  display: flex;
  margin-bottom: 20px;
  .label{
    margin-right: 10px;
    height: 38px;
    padding: 0 16px;
    line-height: 38px;
    text-align: center;
    background: #ECF2FF;
    border-radius: 8px;
    border: 1px solid #2774F4;
    color: #2774F4;
  }
  .label-active{
    background: #2774F4;
    color: #FFFFFF;
  }
}
</style>